<template>
  <el-card class="odds-table-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span>{{ title || '欧洲赔率数据' }}</span>
        <el-button
          type="primary"
          size="small"
          :loading="loading"
          @click="onRefresh"
        >
          {{ refreshText || '刷新' }}
        </el-button>
      </div>
    </template>

    <el-table
      :data="oddsData"
      v-loading="loading"
      style="width: 100%"
      size="small"
      empty-text="暂无数据"
    >
      <el-table-column
        prop="home_odds"
        label="主胜"
        width="120"
        align="center"
      >
        <template #default="{ row }">
          {{ row.home_odds || '-' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="draw_odds"
        label="平局"
        width="120"
        align="center"
      >
        <template #default="{ row }">
          {{ row.draw_odds || '-' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="away_odds"
        label="客胜"
        width="120"
        align="center"
      >
        <template #default="{ row }">
          {{ row.away_odds || '-' }}
        </template>
      </el-table-column>
      <el-table-column
        label="返还率"
        width="120"
        align="center"
      >
        <template #default="{ row }">
          {{ calculateReturnRate(row) }}%
        </template>
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="创建时间"
        min-width="160"
        align="center"
      >
        <template #default="{ row }">
          {{ formatDateTime(row.create_time) }}
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElCard, ElTable, ElTableColumn, ElButton } from 'element-plus'
import { Calendar } from '@element-plus/icons-vue'
import type { FootballEuropeOdds } from '@/pages/europe18w/apis/type'

// 定义组件属性
interface Props {
  oddsData?: FootballEuropeOdds[]
  loading?: boolean
  title?: string
  refreshText?: string
  calculateReturnRate?: (row: any) => number
  formatDateTime?: (date: string | null) => string
}

const props = withDefaults(defineProps<Props>(), {
  oddsData: () => [],
  loading: false,
  title: '欧洲赔率数据',
  refreshText: '刷新',
  calculateReturnRate: (row: any) => {
    if (!row.home_odds || !row.draw_odds || !row.away_odds) return 0
    return parseFloat(((1 / row.home_odds + 1 / row.draw_odds + 1 / row.away_odds) * 100).toFixed(2))
  },
  formatDateTime: (date: string | null) => {
    if (!date) return '-'
    return new Date(date).toLocaleString()
  }
})

// 定义事件
const emit = defineEmits<{
  refresh: []
}>()

// 刷新事件处理
const onRefresh = () => {
  emit('refresh')
}
</script>

<style scoped>
.odds-table-card {
  height: 100%;
}

.card-header {
  font-weight: bold;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:deep(.el-table .el-table__header th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

:deep(.el-table .el-table__row) {
  transition: background-color 0.3s;
}

:deep(.el-table .el-table__row:hover > td) {
  background-color: #f5f7fa;
}

:deep(.el-table td), :deep(.el-table th) {
  padding: 6px 0;
  text-align: center;
}

:deep(.el-table td.el-table__cell) {
  border-bottom: 1px solid #ebeef5;
}

/* 小尺寸表格样式 */
:deep(.el-table--small .el-table__cell) {
  padding: 4px 0;
}
</style>